<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
    <meta http-equiv="X-UA-Compatible" content="IE=9"/>
    <link rel="stylesheet" href="../../../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../../static/css/common.css">
    <link rel="stylesheet" href="../../static/css/index.css">
    <title>实时</title>
</head>
<body>
<!--头部-->
<header class="tophead" id="headerWrap">
    <h3>监控大屏</h3>
</header>
<!--主体-->
<section class="mainbody">
    <div class="layui-form layui-inline motor-area-select layui-hide">
        <select name="areaMenu" lay-filter="motorAreaMenu" id="motorAreaMenu"></select>
    </div>
    <div class="left-part">
        <div class="rotateBorder"></div>
        <div class="img-wrap">
            <img src="../../static/images/motor.png" alt="" class="motor-img">
        </div>
        <div class="alertList">
            <div class="title">产线报警状态</div>
            <ul></ul>
        </div>
    </div>
    <div  class="right-part">
        <p class="h3"><span class="areaName"></span>实时监控 <span class="updTime"></span> </p>
        <p class="legend">
            <span>图例：</span>
            <span><i class="alarm-lights gray-alarm"></i><span>停止</span></span>
            <span><i class="alarm-lights green-alarm"></i><span>正常</span></span>
            <span><i class="alarm-lights yellow-alarm"></i><span>预警</span></span>
            <span><i class="alarm-lights red-alarm"></i><span>超标</span></span>
            <span><i class="alarm-lights blue-alarm"></i><span>维修</span></span>
        </p>
        <div class="main-table">
            <table class="motor-status-table layui-table" lay-skin="nob"></table>
        </div>
    </div>
</section>

</body>
</html>
<!--区域模板-->
<script type="text/html" id="motor-areas-tpl">
    {{each data}}
    <option value="{{$value.areaId}}">{{$value.areaName}}</option>
    {{/each}}
</script>
<script type="text/html" id="motor-status-tpl">
    <tbody>
    <tr class="sideTr">
        <th rowspan="3" class="motorsidetype">走<br>道<br>侧</th>
    </tr>
    <tr class="mo-troughName zou ">
        <th>槽位名称</th>
    </tr>
<!--    <tr class="monitor-status walkway-monitor layui-elip">-->
<!--        <th>监测器状态</th>-->
<!--    </tr>-->
    <tr class="motor-status walkway-motor ">
        <th>马达状态</th>
    </tr>
    <tr class="mo-troughImg">
        <th colspan="2"></th>
    </tr>
    <tr class="sideTr">
        <th rowspan="3" class="motorsidetype">维<br>修<br>侧</th>
    </tr>
<!--    <tr class="monitor-status maintain-monitor layui-elip">-->
<!--        <th>监测器状态</th>-->
<!--    </tr>-->
    <tr class="motor-status maintain-motor ">
        <th>马达状态</th>
    </tr>
    <tr class="mo-troughName wei ">
        <th>槽位名称</th>
    </tr>
    </tbody>
</script>
<script src="../../../lib/layui/layui.js"></script>
<script src="../../static/js/common.js"></script>
<script src="../../static/js/file/index.js"></script>
